let imgBox = document.querySelector(".box>.imgBox>ul>li>a");



//获取图片
let xhr = new XMLHttpRequest();
let data = {
    "type": "图片"
};
// let xhr = new XMLHttpRequest();
xhr.open("POST", "http://studentback.dfbuff.xyz/postMethod");
//设置请求头
//提交数据格式为json格式
xhr.setRequestHeader("Content-Type", "application/json");

//把json对象转换为json字符串
xhr.send(JSON.stringify(data));
xhr.addEventListener("readystatechange", function() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            // console.log(JSON.parse(xhr.responseText));
            let newArr = JSON.parse(xhr.responseText).result;
            newArr.forEach(function(item) {
                let nba = document.createElement("img")
                nba.setAttribute("src", item.content);
                imgBox.appendChild(nba);
            });
        }
    }
});




let box = document.querySelector(".box");
let imgBoxUl = box.querySelector(".imgBox>ul");

//动态生成图片（第一张和最后一张)
// imgBoxUl.appendChild(imgBoxUl.firstElementChild.cloneNode(true))
// imgBoxUl.insertBefore(imgBoxUl.children[imgBoxUl.children.length - 2].cloneNode(true), imgBoxUl.firstElementChild);

let index = 1;
let lastIndex = 1;
let timer;
imgBoxUl.style.transform = `translateX(-${index}00%)`;
setTimeout(function() {
    imgBoxUl.style.transition = ".2s ease-in-out";
}, 300);

let flag = true;


box.addEventListener("click", function(e) {
    if (e.target.className == "arrow_left") {
        arrowLeftFn(e.target);
    };
    if (e.target.className == "arrow_right") {
        arrowRightFn(e.target);
    };

    (e.target.classList.contains("dot")) && dotFn(e.target);
});
//点击右边事件
function arrowRightFn(target) {
    index++;
    if (flag) {
        flagFn()
        imgBoxUl.style.transform = `translateX(-${index}00%)`;
        if (index == imgBoxUl.children.length - 1) {
            index = 1;
            imgBoxUl.addEventListener("transitionend", function() {
                //清除过渡效果，并且ul恢复到-100%的位置
                imgBoxUl.style.transition = "none";
                imgBoxUl.style.transform = `translateX(-${index}00%)`;

                //恢复过渡效果
                //获取最终样式（被计算的样式）
                window.getComputedStyle(imgBoxUl, "style").getPropertyValue("transition");
                imgBoxUl.style.transition = ".2s ease-in-out";
            })
        }
        let egmR = target.parentElement.nextElementSibling.children[index - 1];
        dotColor(egmR);



    }
}
//点击左边事件
function arrowLeftFn(target) {
    index--;
    if (flag) {
        flagFn()
        imgBoxUl.style.transform = `translateX(-${index}00%)`;

        if (index == 0) {
            index = imgBoxUl.children.length - 2;
            imgBoxUl.addEventListener("transitionend", function() {
                //清除过渡效果，并且ul恢复到-400%的位置
                imgBoxUl.style.transition = "none";
                imgBoxUl.style.transform = `translateX(-${index}00%)`;

                //恢复过渡效果
                //获取最终样式（被计算的样式）
                window.getComputedStyle(imgBoxUl, "style").getPropertyValue("transition");
                imgBoxUl.style.transition = ".2s ease-in-out";
            })
        }
        let egm = target.parentElement.nextElementSibling.children[index - 1];
        dotColor(egm);
    }

}
//小圆点点击事件
function dotFn(target) {
    let dataIndex = target.getAttribute("data-index");
    index = dataIndex;
    imgBoxUl.style.transform = `translateX(-${index}00%)`;

    dotColor(target);
};

// 封装小圆点颜色变化函数
function dotColor(tag) {
    // console.log(tag);
    tag.parentElement.children[lastIndex - 1].classList.remove("dotActive");
    tag.classList.add("dotActive");
    // 重新赋值给lastIndex，目的是为了拿到上一次的操作值index
    lastIndex = index;
};

//控制开关
function flagFn() {
    flag = false;
    imgBoxUl.addEventListener("transitionend", function() {
        flag = true;
    })
}

// 自动轮播
timeFn();

function timeFn() {
    if (timer) {
        clearInterval(timer);
    }
    timer = setInterval(function() {
        arrowRightFn(imgBoxUl)
    }, 1000);
}

// 鼠标移入box区域，停止定时器
box.addEventListener("mouseenter", function() {
    clearInterval(timer);
});
// 鼠标移出box区域，开始定时器
box.addEventListener("mouseleave", function() {
    setTimeout(timeFn, 2000)
});

// 检测页面是否切换，切换就停止定时器
window.addEventListener("visibilitychange", function() {
    if (document.hidden) {
        clearInterval(timer);
    } else {
        timeFn();
    }
});